<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 教务管理系统</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial, sans-serif; color: #333; background: #f8f9fa; }
        header { background-color: #007BFF; color: white; padding: 0 40px; height: 60px; display: flex; align-items: center; }
        .logo { font-size: 1.3em; font-weight: bold; margin-right: 40px; }
        nav { display: flex; align-items: center; width: 100%; }
        .nav-left { flex: 1; display: flex; align-items: center; }
        .nav-center { flex: 2; display: flex; justify-content: center; }
        .nav-center a { color: white; text-decoration: none; margin: 0 18px; font-size: 1.1em; transition: text-decoration 0.2s; }
        .nav-center a.active, .nav-center a:hover { text-decoration: underline; }
        .nav-right { flex: 1; text-align: right; font-size: 1em; }
        main { padding: 40px 20px 20px 20px; }
        .title { font-size: 2em; color: #007BFF; margin-bottom: 18px; }
        .desc { margin-bottom: 24px; color: #555; }
        .actions { margin-bottom: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

        /* 表格中的操作按钮容器 */
        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 5px;
        }

        /* 角色标签样式 */
        .role-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.9em;
            font-weight: 500;
        }
        .role-admin {
            background-color: var(--primary-light);
            color: var(--primary-color);
        }
        .role-teacher {
            background-color: var(--info-light);
            color: var(--info-color);
        }
        .role-student {
            background-color: var(--success-light);
            color: var(--success-color);
        }

        .modal-bg {
            display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.2); z-index: 1000;
        }
        .modal {
            background: #fff; border-radius: 8px; box-shadow: 0 2px 12px #e0e0e0; width: 350px; max-width: 90vw; padding: 28px 24px 18px 24px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
        }
        .modal-title { font-size: 1.2em; color: #007BFF; margin-bottom: 18px; text-align: center; }
        .modal label { display: block; margin-bottom: 6px; color: #555; }
        .modal input, .modal select { width: 100%; padding: 7px 10px; margin-bottom: 14px; border: 1px solid #ccc; border-radius: 4px; }
        .modal-btns { text-align: right; }
        .modal-btns button { margin-left: 10px; padding: 7px 18px; border-radius: 4px; border: none; cursor: pointer; }
        .modal-btns .ok { background: var(--success-color); color: #fff; }
        .modal-btns .ok:hover { background: var(--success-dark); }
        .modal-btns .cancel { background: var(--danger-color); color: #fff; }
        .modal-btns .cancel:hover { background: var(--danger-dark); }

        @media (max-width: 900px) {
            main { padding: 20px 5px; }
            .title { font-size: 1.3em; }
            .action-buttons {
                flex-direction: column;
                gap: 5px;
            }
        }
    </style>
</head>
<body>
    <header>
        <nav style="width:100%;display:flex;align-items:center;">
            <div class="nav-left"><span class="logo">教务管理系统</span></div>
            <div class="nav-center" id="navLinks">
                <a href="index.html">首页</a>
                <a href="student.html" class="admin-teacher-link">学生管理</a>
                <a href="attendance.html" class="admin-teacher-link">考勤管理</a>
                <a href="user.html" class="active admin-only-link">用户管理</a>
            </div>
            <div class="nav-right">
                <span id="userName" style="cursor:pointer;position:relative;">admin
                    <span id="logoutMenu" style="display:none;position:absolute;right:0;top:28px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #e0e0e0;padding:0 0;z-index:10;min-width:120px;">
                        <a href="userinfo.html" style="color:#007BFF;text-decoration:none;display:block;padding:8px 18px;text-align:center;" onclick="closeMenu()">个人信息</a>
                        <a href="login.html" style="color:#007BFF;text-decoration:none;display:block;padding:8px 18px;text-align:center;border-top:1px solid #eee;" onclick="logout()">退出登录</a>
                    </span>
                </span>
            </div>
        </nav>
    </header>
    <main>
        <div class="title">用户信息管理</div>
        <div class="desc">可对系统用户进行注册、信息维护和权限分配。</div>
        <div class="actions">
            <button class="btn btn-primary" onclick="showAddUser()">新增用户</button>
            <button class="btn btn-warning" onclick="exportUsers()">导出用户</button>
            <div style="margin-left: auto; display: flex; align-items: center; gap: 10px;">
                <select id="roleSelect" onchange="roleChanged()">
                    <option value="admin" selected>管理员</option>
                    <option value="teacher">老师</option>
                    <option value="student">学生</option>
                </select>
                <select id="classSelect" style="display: none;" onchange="searchUsers()">
                    <option value="">全部班级</option>
                </select>
                <input id="searchInput" type="text" placeholder="搜索用户名/姓名" style="padding:8px 12px; border-radius:4px; border:1px solid #ccc; width:180px;" />
                <button class="btn btn-success" onclick="searchUsers()">搜索</button>
            </div>
        </div>
        <div id="loadingIndicator" style="text-align:center; padding:20px; display:block;">
            <p>正在加载数据，请稍候...</p>
        </div>
        <table id="userTable" style="display:none;">
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>角色</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 数据将在这里动态加载 -->
            </tbody>
        </table>
        <div class="modal-bg" id="addUserBg">
            <div class="modal">
                <div class="modal-title">新增用户</div>
                <label>用户名</label><input id="userNameInput" type="text" placeholder="请输入用户名" />
                <label>姓名</label><input id="realNameInput" type="text" placeholder="请输入姓名" />
                <label id="phoneLabel">手机号</label><input id="phoneInput" type="text" placeholder="请输入手机号" />
                <label>角色</label>
                <select id="roleInput">
                    <option value="admin">管理员</option>
                    <option value="teacher">老师</option>
                </select>
                <div class="modal-btns">
                    <button class="ok" onclick="addUser()">确定</button>
                    <button class="cancel" onclick="closeAddUser()">取消</button>
                </div>
            </div>
        </div>
    </main>
    <script>
        // 检查用户是否已登录
        function checkLogin() {
            var user = localStorage.getItem('loginUser');
            if (!user) {
                // 未登录，重定向到登录页面
                window.location.href = 'login.html';
                return false;
            }
            return user;
        }

        // 根据用户角色控制页面显示
        function setupUIByRole() {
            var role = localStorage.getItem('userRole') || '';
            var userName = localStorage.getItem('userName') || localStorage.getItem('loginUser');

            // 设置用户名显示
            document.getElementById('userName').firstChild.textContent = userName;

            // 控制导航栏显示
            var adminTeacherLinks = document.querySelectorAll('.admin-teacher-link');
            var adminOnlyLinks = document.querySelectorAll('.admin-only-link');

            if (role === 'admin') {
                // 管理员可以看到所有链接
                adminTeacherLinks.forEach(link => link.style.display = 'inline');
                adminOnlyLinks.forEach(link => link.style.display = 'inline');
            } else if (role === 'teacher') {
                // 老师可以看到学生管理和考勤管理，但不能访问用户管理页面
                adminTeacherLinks.forEach(link => link.style.display = 'inline');
                adminOnlyLinks.forEach(link => link.style.display = 'none');
                // 老师不应该访问此页面，重定向到首页
                window.location.href = 'index.html';
                return;
            } else if (role === 'student') {
                // 学生不应该访问此页面，重定向到首页
                window.location.href = 'index.html';
                return;
            }
        }

        // 页面加载时获取用户列表
        document.addEventListener('DOMContentLoaded', function() {
            // 验证登录状态
            var user = checkLogin();
            if (!user) return; // 如果未登录，已重定向到登录页面

            // 根据用户角色设置UI
            setupUIByRole();

            // 默认选中管理员角色
            document.getElementById('roleSelect').value = 'admin';

            // 加载班级列表
            fetchClassList();

            // 获取用户列表（默认只显示管理员）
            fetchUserList();

            // 初始化添加用户表单中的角色选择事件
            var roleInput = document.getElementById('roleInput');
            // 触发一次change事件，确保初始状态正确
            var event = new Event('change');
            roleInput.dispatchEvent(event);
        });

        // 获取班级列表
        function fetchClassList() {
            fetch('/api/class/list')
                .then(response => response.json())
                .then(data => {
                    var classSelect = document.getElementById('classSelect');

                    // 保留第一个选项（全部班级）
                    classSelect.innerHTML = '<option value="">全部班级</option>';

                    if (data && data.length > 0) {
                        data.forEach(cls => {
                            var option = document.createElement('option');
                            option.value = cls.id;
                            option.textContent = cls.name;
                            classSelect.appendChild(option);
                        });
                    }
                })
                .catch(error => {
                    console.error('获取班级列表失败:', error);
                });
        }

        // 角色变更处理
        function roleChanged() {
            var role = document.getElementById('roleSelect').value;
            var classSelect = document.getElementById('classSelect');

            // 如果选择了学生角色，显示班级下拉框
            if (role === 'student') {
                classSelect.style.display = 'block';
            } else {
                classSelect.style.display = 'none';
                classSelect.value = ''; // 重置班级选择
            }

            // 更新搜索框提示文本
            var searchInput = document.getElementById('searchInput');
            if (role === 'student') {
                searchInput.placeholder = '搜索姓名/学号';
            } else {
                searchInput.placeholder = '搜索用户名/姓名';
            }

            // 重新获取用户列表
            fetchUserList();
        }

        // 添加用户表单中角色选择变更处理
        document.getElementById('roleInput').onchange = function() {
            var role = this.value;
            var phoneLabel = document.getElementById('phoneLabel');
            var phoneInput = document.getElementById('phoneInput');

            // 如果选择了学生角色，隐藏手机号输入框
            if (role === 'student') {
                phoneLabel.style.display = 'none';
                phoneInput.style.display = 'none';
            } else {
                phoneLabel.style.display = 'block';
                phoneInput.style.display = 'block';
            }
        };

        // 获取用户列表
        function fetchUserList() {
            // 显示加载指示器，隐藏表格
            document.getElementById('loadingIndicator').style.display = 'block';
            document.getElementById('userTable').style.display = 'none';

            var role = document.getElementById('roleSelect').value;
            var keyword = document.getElementById('searchInput').value.trim();
            var classId = document.getElementById('classSelect').value;

            // 构建URL
            var url = '/api/user/list';

            // 始终添加角色参数
            url += '?role=' + role;

            // 如果是学生角色且选择了班级，添加班级参数
            if (role === 'student' && classId) {
                url += '&classId=' + classId;
            }

            // 如果有关键字，添加关键字参数
            if (keyword) {
                url += '&keyword=' + encodeURIComponent(keyword);
            }

            // 添加当前用户名参数，用于权限控制
            var currentUsername = localStorage.getItem('loginUser') || 'admin';
            url += '&currentUsername=' + encodeURIComponent(currentUsername);

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    var tbody = document.querySelector('#userTable tbody');
                    tbody.innerHTML = '';

                    if (data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">暂无数据</td></tr>';

                        // 隐藏加载指示器，显示表格
                        document.getElementById('loadingIndicator').style.display = 'none';
                        document.getElementById('userTable').style.display = 'table';
                        return;
                    }

                    data.forEach(user => {
                        var tr = document.createElement('tr');

                        // 基本信息
                        var basicInfo = `
                            <td>${user.username}</td>
                            <td>${user.name || ''}</td>
                            <td>${getRoleName(user.role)}</td>
                            <td>${user.status || '正常'}</td>
                        `;

                        // 操作按钮，根据角色和权限显示不同的按钮
                        var actionButtons = '<td><div class="action-buttons">';

                        // 初始管理员ID为1
                        var isInitialAdmin = (user.id === 1);
                        var isCurrentUserInitialAdmin = (currentUsername === 'admin');

                        // 学生用户不显示编辑和删除按钮（在学生管理页面处理）
                        if (user.role !== 'student') {
                            // 编辑按钮
                            actionButtons += `<button class="btn btn-info" onclick="editUser(${user.id})">编辑</button>`;

                            // 删除按钮（初始管理员不能被删除）
                            if (!isInitialAdmin) {
                                // 如果是管理员，只有初始管理员可以删除
                                if (user.role !== 'admin' || isCurrentUserInitialAdmin) {
                                    actionButtons += `<button class="btn btn-danger" onclick="deleteUser(${user.id}, '${user.username}')">删除</button>`;
                                }
                            }
                        }

                        // 重置密码按钮（所有用户都可以重置密码）
                        actionButtons += `<button class="btn btn-warning" onclick="resetPassword(${user.id}, '${user.username}')">重置密码</button>`;

                        actionButtons += '</div></td>';

                        tr.innerHTML = basicInfo + actionButtons;
                        tbody.appendChild(tr);
                    });

                    // 隐藏加载指示器，显示表格
                    document.getElementById('loadingIndicator').style.display = 'none';
                    document.getElementById('userTable').style.display = 'table';
                })
                .catch(error => {
                    console.error('获取用户列表失败:', error);

                    // 显示错误信息
                    var tbody = document.querySelector('#userTable tbody');
                    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;">获取用户数据失败: ' + error.message + '</td></tr>';

                    // 隐藏加载指示器，显示表格（即使有错误）
                    document.getElementById('loadingIndicator').style.display = 'none';
                    document.getElementById('userTable').style.display = 'table';
                });
        }

        // 获取角色名称（带样式）
        function getRoleName(role) {
            let name, className;
            switch (role) {
                case 'admin':
                    name = '管理员';
                    className = 'role-admin';
                    break;
                case 'teacher':
                    name = '教师';
                    className = 'role-teacher';
                    break;
                case 'student':
                    name = '学生';
                    className = 'role-student';
                    break;
                default:
                    name = role;
                    className = '';
            }
            return `<span class="role-tag ${className}">${name}</span>`;
        }

        // 搜索用户
        function searchUsers() {
            fetchUserList();
        }

        // 添加用户
        function addUser() {
            var username = document.getElementById('userNameInput').value.trim();
            var name = document.getElementById('realNameInput').value.trim();
            var phone = document.getElementById('phoneInput').value.trim();
            var role = document.getElementById('roleInput').value;

            if (!username) {
                alert('请输入用户名');
                return;
            }
            if (!name) {
                alert('请输入姓名');
                return;
            }

            var user = {
                username: username,
                name: name,
                role: role
            };

            // 只有非学生用户才设置手机号
            if (role !== 'student' && phone) {
                user.phone = phone;
            }

            fetch('/api/user/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(user)
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('添加用户成功');
                    closeAddUser();
                    fetchUserList();
                } else {
                    alert(result.message || '添加用户失败');
                }
            })
            .catch(error => {
                console.error('添加用户失败:', error);
                alert('添加用户失败，请稍后重试');
            });
        }

        // 编辑用户（打开编辑窗口）
        function editUser(id) {
            // 获取用户详情
            fetch('/api/user/detail?id=' + id)
                .then(response => response.json())
                .then(result => {
                    if (result.success) {
                        var user = result.data;
                        // 创建编辑窗口
                        var editModal = document.createElement('div');
                        editModal.className = 'modal-bg';
                        editModal.id = 'editUserBg';
                        editModal.style.display = 'block';

                        // 根据角色决定是否显示手机号输入框
                        var phoneInputHtml = '';
                        if (user.role !== 'student') {
                            phoneInputHtml = `<label>手机号</label><input id="editPhoneInput" type="text" value="${user.phone || ''}" placeholder="请输入手机号" />`;
                        }

                        editModal.innerHTML = `
                            <div class="modal">
                                <div class="modal-title">编辑用户</div>
                                <input type="hidden" id="editUserId" value="${user.id}">
                                <label>用户名</label><input id="editUserNameInput" type="text" value="${user.username}" placeholder="请输入用户名" />
                                <label>姓名</label><input id="editRealNameInput" type="text" value="${user.name || ''}" placeholder="请输入姓名" />
                                ${phoneInputHtml}
                                <label>角色</label>
                                <select id="editRoleInput" onchange="editRoleChanged()">
                                    <option value="admin" ${user.role === 'admin' ? 'selected' : ''}>管理员</option>
                                    <option value="teacher" ${user.role === 'teacher' ? 'selected' : ''}>老师</option>
                                </select>
                                <div class="modal-btns">
                                    <button class="ok" onclick="updateUser()">确定</button>
                                    <button class="cancel" onclick="closeEditUser()">取消</button>
                                </div>
                            </div>
                        `;

                        document.body.appendChild(editModal);
                    } else {
                        alert(result.message || '获取用户信息失败');
                    }
                })
                .catch(error => {
                    console.error('获取用户信息失败:', error);
                    alert('获取用户信息失败，请稍后重试');
                });
        }

        // 关闭编辑窗口
        function closeEditUser() {
            var editModal = document.getElementById('editUserBg');
            if (editModal) {
                document.body.removeChild(editModal);
            }
        }

        // 编辑用户时角色变更处理
        function editRoleChanged() {
            var role = document.getElementById('editRoleInput').value;
            var phoneInput = document.getElementById('editPhoneInput');
            var phoneLabel = phoneInput ? phoneInput.previousElementSibling : null;

            // 如果存在手机号输入框
            if (phoneInput && phoneLabel) {
                // 如果选择了学生角色，隐藏手机号输入框
                if (role === 'student') {
                    phoneLabel.style.display = 'none';
                    phoneInput.style.display = 'none';
                } else {
                    phoneLabel.style.display = 'block';
                    phoneInput.style.display = 'block';
                }
            } else if (role !== 'student') {
                // 如果切换到非学生角色，但没有手机号输入框，则添加
                var roleLabel = document.getElementById('editRoleInput').previousElementSibling;
                var phoneHtml = `<label>手机号</label><input id="editPhoneInput" type="text" placeholder="请输入手机号" />`;

                // 在角色标签前插入手机号输入框
                roleLabel.insertAdjacentHTML('beforebegin', phoneHtml);
            }
        }

        // 更新用户信息
        function updateUser() {
            var id = document.getElementById('editUserId').value;
            var username = document.getElementById('editUserNameInput').value.trim();
            var name = document.getElementById('editRealNameInput').value.trim();
            var role = document.getElementById('editRoleInput').value;

            if (!username) {
                alert('请输入用户名');
                return;
            }
            if (!name) {
                alert('请输入姓名');
                return;
            }

            var user = {
                id: parseInt(id),
                username: username,
                name: name,
                role: role
            };

            // 只有非学生用户才设置手机号
            var phoneInput = document.getElementById('editPhoneInput');
            if (role !== 'student' && phoneInput && phoneInput.value.trim()) {
                user.phone = phoneInput.value.trim();
            }

            fetch('/api/user/edit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(user)
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('更新用户信息成功');
                    closeEditUser();
                    fetchUserList();
                } else {
                    alert(result.message || '更新用户信息失败');
                }
            })
            .catch(error => {
                console.error('更新用户信息失败:', error);
                alert('更新用户信息失败，请稍后重试');
            });
        }

        // 删除用户
        function deleteUser(id, username) {
            if (!confirm('确定要删除用户 ' + username + ' 吗？')) {
                return;
            }

            fetch('/api/user/delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id: id })
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('删除用户成功');
                    fetchUserList();
                } else {
                    alert(result.message || '删除用户失败');
                }
            })
            .catch(error => {
                console.error('删除用户失败:', error);
                alert('删除用户失败，请稍后重试');
            });
        }

        // 重置用户密码
        function resetPassword(id, username) {
            if (!confirm('确定要重置用户 ' + username + ' 的密码吗？密码将被重置为与用户名相同。')) {
                return;
            }

            fetch('/api/user/resetPassword', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id: id })
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    alert('重置密码成功，新密码为：' + username);
                } else {
                    alert(result.message || '重置密码失败');
                }
            })
            .catch(error => {
                console.error('重置密码失败:', error);
                alert('重置密码失败，请稍后重试');
            });
        }

        // 通用函数
        document.getElementById('userName').onclick = function(e) {
            var menu = document.getElementById('logoutMenu');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
            e.stopPropagation();
        };

        document.body.onclick = function() {
            var menu = document.getElementById('logoutMenu');
            if(menu) menu.style.display = 'none';
        };

        function logout() {
            localStorage.removeItem('loginUser');
            window.location.href = 'login.html'; // 退出后重定向到登录页面
        }

        // 导出用户信息
        function exportUsers() {
            var role = document.getElementById('roleSelect').value;
            var roleName = '';
            switch(role) {
                case 'admin': roleName = '管理员'; break;
                case 'teacher': roleName = '教师'; break;
                case 'student': roleName = '学生'; break;
                default: roleName = role;
            }

            var classId = '';
            var className = '';

            // 如果是学生角色且选择了班级
            if (role === 'student') {
                classId = document.getElementById('classSelect').value;
                if (classId) {
                    className = document.getElementById('classSelect').options[document.getElementById('classSelect').selectedIndex].text;
                } else {
                    className = '全部班级';
                }
            }

            // 构建URL，与获取用户列表相同的参数
            var url = '/api/user/list?role=' + role;

            // 如果是学生角色且选择了班级，添加班级参数
            if (role === 'student' && classId) {
                url += '&classId=' + classId;
            }

            // 添加当前用户名参数，用于权限控制
            var currentUsername = localStorage.getItem('loginUser') || 'admin';
            url += '&currentUsername=' + encodeURIComponent(currentUsername);

            // 获取用户数据
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.length === 0) {
                        alert('暂无用户数据可导出');
                        return;
                    }

                    // 添加UTF-8 BOM标记，解决中文乱码问题
                    var BOM = new Uint8Array([0xEF, 0xBB, 0xBF]);

                    // 创建CSV内容
                    var csvContent = '';

                    // 根据角色设置不同的表头
                    if (role === 'student') {
                        csvContent = "学号,姓名,班级,状态\n";

                        // 按学号排序
                        data.sort((a, b) => (a.studentId || '').localeCompare(b.studentId || ''));

                        data.forEach(user => {
                            // 处理可能包含逗号的字段，用双引号包裹
                            var name = user.name ? `"${user.name.replace(/"/g, '""')}"` : '';
                            var className = user.className ? `"${user.className.replace(/"/g, '""')}"` : '';
                            var status = user.status ? `"${user.status.replace(/"/g, '""')}"` : '"正常"';

                            csvContent += `${user.studentId || ''},${name},${className},${status}\n`;
                        });
                    } else {
                        csvContent = "用户名,姓名,角色,手机号,状态\n";

                        // 按用户名排序
                        data.sort((a, b) => a.username.localeCompare(b.username));

                        data.forEach(user => {
                            var roleName = '';
                            switch(user.role) {
                                case 'admin': roleName = '管理员'; break;
                                case 'teacher': roleName = '教师'; break;
                                case 'student': roleName = '学生'; break;
                                default: roleName = user.role;
                            }

                            // 处理可能包含逗号的字段，用双引号包裹
                            var name = user.name ? `"${user.name.replace(/"/g, '""')}"` : '';
                            var roleNameQuoted = `"${roleName}"`;
                            var phone = user.phone ? `"${user.phone.replace(/"/g, '""')}"` : '';
                            var status = user.status ? `"${user.status.replace(/"/g, '""')}"` : '"正常"';

                            csvContent += `${user.username},${name},${roleNameQuoted},${phone},${status}\n`;
                        });
                    }

                    // 创建Blob对象，添加BOM标记
                    var blob = new Blob([BOM, csvContent], { type: 'text/csv;charset=utf-8;' });

                    // 创建下载链接
                    var link = document.createElement("a");
                    var url = URL.createObjectURL(blob);
                    link.setAttribute("href", url);

                    // 设置文件名
                    var fileName = '';
                    if (role === 'student') {
                        fileName = `学生用户_${className}_${new Date().toLocaleDateString()}.csv`;
                    } else {
                        fileName = `${roleName}用户_${new Date().toLocaleDateString()}.csv`;
                    }

                    link.setAttribute("download", fileName);
                    link.style.visibility = 'hidden';

                    // 添加到文档并触发点击
                    document.body.appendChild(link);
                    link.click();

                    // 清理
                    document.body.removeChild(link);
                })
                .catch(error => {
                    console.error('导出用户信息失败:', error);
                    alert('导出用户信息失败，请稍后重试');
                });
        }

        function closeMenu() {
            setTimeout(function(){
                var menu = document.getElementById('logoutMenu');
                if(menu) menu.style.display = 'none';
            }, 100);
        }

        function showAddUser() {
            document.getElementById('addUserBg').style.display = 'block';
        }

        function closeAddUser() {
            document.getElementById('addUserBg').style.display = 'none';
            // 清空表单
            document.getElementById('userNameInput').value = '';
            document.getElementById('realNameInput').value = '';
            document.getElementById('phoneInput').value = '';
        }
    </script>
</body>
</html>
